<template>
    <div class="device_page_class">
        <div class="card_div_class" style="margin-bottom: 18px">
            <div style="display: flex; justify-content: space-between; align-items: center">
                <div style="display: flex; font-weight: bold; align-items: center">
                    <div style="margin-left: 2px">设备实时状态管理</div>
                </div>
                <div style="display: flex; align-items: center" @click="areaShow = true">
                    {{ areaData }}<van-icon name="arrow-down" style="margin-left: 4px" />
                </div>
            </div>
        </div>

        <div class="card_div_class" style="margin-top: 6px" v-for="(item, index) in deviceData" :key="index">
            <div style="display: flex; justify-content: space-between; align-items: center">
                <div style="display: flex; font-weight: bold; align-items: center">
                    <div :class="item.styleClass"></div>
                    <div style="margin-left: 2px">{{ item.name }}</div>
                </div>
                <div style="display: flex; align-items: center; font-size: 12px" v-show="item.grade == '在线'">
                    传感器状态:<span style="color: #409eff">{{ item.grade }}</span>
                </div>
                <div style="display: flex; align-items: center; font-size: 12px" v-show="item.grade != '在线'">
                    传感器状态:<span style="color: #909399">{{ item.grade }}</span>
                </div>
            </div>
        </div>

        <van-popup v-model="areaShow" position="bottom">
            <van-picker
                title="选择区域"
                show-toolbar
                :columns="areaOptions"
                v-model="areaData"
                @confirm="onConfirmArea"
                @cancel="areaShow = false"
            />
        </van-popup>
    </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
    name: "Device",
    data() {
        return {
            areaData: "",
            areaShow: false,
            areaOptions: ["总区域", "联合工房二层", "地下一层配电房", "出入库区", "分拣区", "高架库区"],
            deviceData: [
                { grade: "在线", name: "1号包装机电源", styleClass: "dots_class" },
                { grade: "离线", name: "2号包装机电源", styleClass: "jidi_dots_class" },
                { grade: "在线", name: "异型烟分拣机电源", styleClass: "dots_class" },
                { grade: "在线", name: "水泵1", styleClass: "dots_class" },
                { grade: "在线", name: "4号分拣线电源", styleClass: "dots_class" }
            ]
        };
    },
    computed: {
        ...mapGetters([])
    },
    mounted() {
        this.areaData = "总区域";
    },
    methods: {
        onConfirmArea: function (value) {
            this.areaData = value;
            this.areaShow = false;
        }
    }
};
</script>

<style scoped>
.device_page_class {
    width: 100%;
    height: 100%;
    padding: 8px 10px 80px 10px;
}

.device_page_class .card_div_class {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    padding: 12px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
}

.dots_class {
    width: 10px;
    height: 10px;
    background: #409eff;
    border-radius: 50%;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dots_class:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #409eff;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 200ms;
    transition: 0.5s all ease;
    transform: scale(1);
}

.jidi_dots_class {
    width: 10px;
    height: 10px;
    background: #909399;
    border-radius: 50%;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.jidi_dots_class:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #909399;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 200ms;
    transition: 0.5s all ease;
    transform: scale(1);
}

.zhongdeng_dots_class {
    width: 10px;
    height: 10px;
    background: #ffec3d;
    border-radius: 50%;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.zhongdeng_dots_class:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ffec3d;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 200ms;
    transition: 0.5s all ease;
    transform: scale(1);
}

.gao_dots_class {
    width: 10px;
    height: 10px;
    background: #fa8c16;
    border-radius: 50%;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gao_dots_class:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fa8c16;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 200ms;
    transition: 0.5s all ease;
    transform: scale(1);
}

.jigao_dots_class {
    width: 10px;
    height: 10px;
    background: #820014;
    border-radius: 50%;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.jigao_dots_class:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #820014;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 200ms;
    transition: 0.5s all ease;
    transform: scale(1);
}
@keyframes scale {
    0% {
        transform: scale(1);
    }
    50%,
    75% {
        transform: scale(2.5);
    }
    78%,
    100% {
        opacity: 0;
    }
}
</style>
